<template>
	<!--系统配置相关信息表单-->
	<div class="shezhi">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="主机" prop="host" >
					<el-input v-model="ruleForm.host" style="width:50%" placeholder="请输入主机名"></el-input>
					</el-form-item>
					<el-form-item label="端口" prop="port">
					<el-input  v-model.number="ruleForm.port" style="width:50%" :maxlength="5" placeholder="请输入端口号"></el-input>
					</el-form-item>
					<el-form-item label="用户" prop="user">
					<el-input  v-model="ruleForm.user" style="width:50%" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pwd">
					<el-input type="password" v-model="ruleForm.pwd" style="width:50%" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item style="margin-left:450px">
					<el-button type="primary"  @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
			</el-form>
	</div>
</template>
<script>
	export default{
		name:'config',
		data(){
			var ipAddress = (rule, value, callback) => {
				var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;//正则表达式   
				if (re.test(value)) {
					if( RegExp.$1<256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256){
						callback();
					}
				}else {	
					return callback(new Error('IP有误！'));	          
				}
			};
			return{
				ruleForm:{
					user:'',
					port:'',
					pwd:'',
					host:''
				},
				rules:{
					user:[
						{required:true,message:'用户名不能为空',trigger:'blur'},
						{min:2,max:16,message:'用户名长度须在2-16之间',trigger:'blur'}
					],
					port:[
						{required:true,message:'端口号不能为空',trigger:'blur'},
						{ type:'number',required:true,message:'端口号必须为数字格式',trigger:'blur'}
					],
					pwd: [
						{ require:true,message:'请输入密码',trigger:'blur' },
						{min:6,max:16,message:'密码长度须在6-12之间',trigger:'blur'}
					],
					host:[
						{required:true,message:'主机号不能为空',trigger:'blur'},
						{ validator: ipAddress, trigger: 'blur' },
					]
				}
			}
		},
		methods:{
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//获取表单数据
						// var that=this;
						var user=this.ruleForm.user;
						var pwd=this.ruleForm.pwd;
						var port=this.ruleForm.port;
						var host=this.ruleForm.host;
						//console.log(user,pwd,port,host,5555);
						//储存数据
						var data=[];
						data.host=host;
						data.user=user;
						data.pwd=pwd;
						data.port=port;
						//console.log(data,7777);
						//请求接口
						$.ajax({
							type:'post',
							data:data,
							url:url,
							dataType:json,
							success:function(){
								console.log('success');
							},
							error:function(){
								console.log('error');
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},			
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>
<style scoped>
	.shezhi{ width:90%;margin:40px; }
</style>